<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" bg-color="#0a1432" inactive-color="#fff" :current="current"
			@change="change"></u-tabs>
		<view class="img" v-if="current == 0">
			<image :src="dataimg.wx_img"></image>
		</view>
		<view class="img" v-else>
			<image :src="dataimg.zfb_img"></image>
		</view>
  
		<view class="ipt">
			<view class="phone">选择转账的app</view>
			<view class="inp-phone" @click="select">
				<uni-easyinput :disabled="true" v-model="appname" placeholder="请选择付款的app" suffixIcon="arrowdown" />
			</view>
			<view class="phone">金额</view>
			<view class="inp-phone">
				<uni-easyinput v-model="money" placeholder="请输入转账的金额" />
			</view>
			<view class="phone">转账单号或订单号</view>
			<view class="inp-phone">
				<uni-easyinput v-model="order" placeholder="请输入有效的转账单号或订单号" />
			</view>
			<view class="phone">备注</view>
			<view class="inp-phone">
				<uni-easyinput v-model="content" placeholder="备注" />
			</view>

			<view class="phone">上传付款凭证</view>
			<view class="inp-phone1" @click="chooseIMG">
				<image v-if="!srcimg" style="width: 400rpx;height: 400rpx;margin: auto;" src="../../static/add.png"
					mode="aspectFill"></image>
				<image v-else style="width: 400rpx;height: 400rpx;margin: auto;" :src="srcimg" mode="widthFix">
				</image>
			</view>
		</view>
		<view class="btn" @click="recharge">
			确认提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '微信'
				}, {
					name: '支付宝'
				}],
				dataimg: "",
				order: "", //订单编号
				current: 0,
				appname: "微信",
				apptype: 1, //1 微信  2支付宝
				money: "", //转账金额
				content: "", //备注
				srcimg: "",
        
			}
		},
		onLoad() {
			this.erweima()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			// 获取付款码
			async erweima() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'shows/index/erweima',
					data: {
						uid: uni.getStorageSync("uid"),
						token: uni.getStorageSync("token")
					},
					method: "POST"
				});
				console.log("获取付款码", res)
				if (res.code == 200) {
          
					this.dataimg = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000,
					})
				}
			},
      // 上传付款凭证
      chooseIMG() {
        var that = this
        uni.chooseImage({
          count: 1,
          success(res) {
            var zfbSrc = res.tempFilePaths[0];
            uni.uploadFile({
              url: that.apiUrl + 'shows/index/img',
              name: 'pic',
              filePath: "" + zfbSrc,
              formData: {
                file: "pic",
                uid: uni.getStorageSync("uid"),
                token: uni.getStorageSync("token"),
                img: zfbSrc
              },
              success(res) {
                // var a = JSON.parse(res.data)
                that.srcimg = res.data
                console.log(that.srcimg)
                // that.imgName = a.data.filename
              },
              fail(res) {
                // console.log(res)
                uni.showToast({
                  title: "请稍后重试",
                  icon: "none"
                })
              }
            });
          }
        });
      },
			// chooseIMG() {
			// 	var that = this;
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success(res) {
			// 			console.log(res)
			// 			console.log(res.tempFilePaths[0]);
			// 			that.srcimg = res.tempFilePaths[0];
			// 		}
			// 	});
			// },
			// 充值
			async recharge() {
        if(!this.money || !this.order || !this.content){
          return uni.showToast({
            title:'金额，订单号，备注不能为空',
            icon:"none"
          })
        }
        if(!this.srcimg){
          return uni.showToast({
            title:'请上传支付凭证',
            icon:"none"
          })
        }
				const {
					data: res
				} = await this.$myHttp({
					url: 'shows/index/recharge',
					data: {
						uid: uni.getStorageSync("uid"),
						token: uni.getStorageSync("token"),
						kahao: this.order,
						img: this.srcimg,
						money: this.money,
						itype: this.apptype,
						content: this.content,
						// img: "http://vtapi.xb-l.com/upload/f3/2093f7816a778a105ec776e24a4456.png"
					},
					method: "POST"
				});
				if (res.code == 200) {
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000,
					})
				}
			},
			select() {
				var that = this
				uni.showActionSheet({
					itemList: ['微信', '支付宝'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if (res.tapIndex == 0) {
							that.apptype = 1
							that.appname = "微信"
						}
						if (res.tapIndex == 1) {
							that.apptype = 2
							that.appname = "支付宝"
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #0a1432;
	}

	.img {
		margin: 40rpx auto;
		text-align: center;
	}

	.img image {
		width: 300rpx;
		height: 400rpx;
	}

	.ipt {
		width: 90%;
		margin: 0 auto;
	}

	.phone {
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 20rpx 0;
	}

	.inp-phone {
		border-radius: 10rpx;
		width: 95%;
		margin: 0 auto;
		/* height: 66rpx; */
		background-color: #fff;
		font-size: 32rpx;
		/* padding: 0 40rpx; */
		color: #000000;
	}

	.inp-phone1 {
		border-radius: 10rpx;
		width: 60%;
		margin: 0 auto;
		font-size: 32rpx;
		color: #000000;
	}
.inp-phone1 image{
  width: 100%;
  height: 100%;
}
	.btn {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		text-align: center;
		margin: 100rpx auto;
	}
</style>
